<template>
    <div class="box">
        <h3>MyComA组件</h3>
        <div>count:{{ count }}</div>
        <div>doblueCount:{{ count * 2 }}</div>
        <div>doblueCount:{{ doubleCount }}</div>
        <button @click="count++">count++</button>
        <button @click="handler">count++</button>
    </div>
</template>

<script>
// 下面是vue2选项式写法
export default {
    // data必须是一个函数
    data() {
        return {
            count: 1
        }
    },
    methods: {
        handler() {
            this.count++
        }
    },
    computed: {
        doubleCount() {
            // 根据一个值变化了，返回出一个新值
            // 无法获取异步的结果，因为计算属性需要同步返回
            return this.count * 2
        }
    },
    mounted() {
    },
    watch: {
        count(newV, oldV) {
            // 根据一个值变化了可以发送ajax请求
            // console.log('count变化了', newV, oldV)
        }
    }
}
</script>

<style></style>